<template>
	<view class="poster-container">
		<!-- 海报容器 -->
		<view :class="['share-poster', { show: showPoster }]" @tap="closePoster">
			<view class="poster-center" :style="[posterStyle]" @tap.stop>
				<image :src="posterUrl" :mode="posterStyle.mode || 'heightFix'" class="image"></image>
			</view>
		</view>
		<!-- 分享菜单 -->
		<view :class="['poster-bottom', { show: showPoster }]">
			<view class="flex align-center">
				<view class="flex-sub text-center relative" @tap="onAppShare">
					<button open-type="share" class="button"></button>
					<image :src="qiniu('Fl8i9pjJyodBWWVuPEQTrxLZ32Ja')" class="icon"></image>
					<view class="test-sm text-666">微信好友</view>
				</view>
				<view class="flex-sub text-center" @tap="onSaveImg">
					<image :src="qiniu('Fnwfg4JUveKcSukGUE_ZMlQbTkO9')" class="icon"></image>
					<view class="test-sm text-666">保存到相册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { WEB_BASEURL } from '@/api/'
import { mpShare } from '@/api/share'
import $mUtils from '@/common/utils'
let settingWritePhotosAlbum = false

export default {
	name: 'share-poster',
	props: {
		// 海报路径
		posterUrl: {
			type: String,
			default: ''
		},
		// 显示海报
		showPoster: {
			type: Boolean,
			default: false
		},
		// APP分享参数
		appShare: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 海报样式
		posterStyle: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		/**
		 * APP分享到微信
		 */
		onAppShare() {
			// #ifdef H5
			$mUtils.tip('请前往源晓退休计算器小程序或APP分享')
			// #endif

			// #ifdef APP-PLUS
			if (!plus.runtime.isApplicationExist({ pname: 'com.tencent.mm', action: 'weixin://' })) {
				return $mUtils.tip('请先安装安装微信')
			}

			let share = mpShare(this.appShare)

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: share.title,
				imageUrl: share.imageUrl,
				href: `${WEB_BASEURL}/${share.path}`,
				miniProgram: {
					id: 'gh_f034a6ad541d',
					path: share.path,
					webUrl: `${WEB_BASEURL}/${share.path}`,
					type: import.meta.env.MODE === 'development' ? 2 : 0
				}
			})
			// #endif
		},
		/**
		 * 保存图片
		 */
		onSaveImg() {
			// #ifdef APP-PLUS || H5
			uni.showLoading({
				mask: true,
				title: '海报下载中'
			})
			uni.saveImageToPhotosAlbum({
				filePath: this.posterUrl,
				success: () => {
					$mUtils.tip('保存成功', 'success')
				},
				complete: () => {
					uni.hideLoading()
				}
			})
			// #endif

			// #ifdef MP-WEIXIN
			uni.showLoading({
				mask: true,
				title: '海报下载中'
			})
			if (settingWritePhotosAlbum) {
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							uni.saveImageToPhotosAlbum({
								filePath: this.posterUrl,
								success: () => {
									$mUtils.tip('保存成功', 'success')
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请先在设置页面打开“保存相册”使用权限',
								confirmText: '去设置',
								cancelText: '算了',
								success: data => {
									if (data.confirm) {
										uni.openSetting()
									}
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						}
					}
				})
			} else {
				settingWritePhotosAlbum = true
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: this.posterUrl,
							success: () => {
								$mUtils.tip('保存成功', 'success')
							},
							complete: () => {
								uni.hideLoading()
							}
						})
					}
				})
			}
			// #endif
		},
		/**
		 * 关闭海报
		 */
		closePoster() {
			this.$emit('close')
		}
	}
}
</script>

<style lang="scss" scoped>
.share-poster {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transform: scale(1.2);
	perspective: 2500upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out;
	pointer-events: none;
	backface-visibility: hidden;
	z-index: 1024;
	&.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	.poster-center {
		position: fixed;
		width: 630rpx;
		top: 50%;
		left: 50%;
		z-index: 1024;
		height: 948rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		background: linear-gradient(180deg, #b5d0e8 0%, #dfcadb 100%);
		margin-left: -315rpx;
		margin-top: -555rpx;
		.image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
}
.poster-bottom {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: -250rpx;
	z-index: 1024;
	transition: 0.3s all;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 26rpx 26rpx 0 0;
	padding: 20rpx 0 0;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 40rpx);
	&.show {
		bottom: 0;
	}
	.icon {
		width: 90rpx;
		height: 90rpx;
		margin: 0 0 10rpx;
	}
	.button {
		position: absolute;
		width: 120rpx;
		height: 155rpx;
		left: 50%;
		top: 0;
		opacity: 0;
		z-index: 2;
		transform: translateX(-50%);
	}
}
</style>
